<script setup lang="ts">
  import { useChannelStore } from '@/store/channel'
  import { computed } from 'vue'
  import RecommendMessage from "@/components/RecommendMessage.vue";
  const channel = useChannelStore()
  const avatar = computed(() => {
    return channel.SystemInfo.robotAvatar
  })
  const props = defineProps({
    message: {
      type: Object,
      default: () => ({}),
    },
  })
</script>

<template>
  <div
    class="w-full h-auto pl-3 pr-14 box-border mt-3 flex flex-row justify-start"
  >
    <div class="avatar">
      <img class="rounded-md w-10 h-10 mt-1" :src="avatar" alt="" />
    </div>
    <div class="content flex-1 w-full h-auto pl-2 ml-1 pt-3">
      <!-- <span class="name-time text-[16px] block">lyb</span> -->
      <!-- 消息体 -->
      <div
        class="bg-[#fff] rounded-lg px-3 py-1 inline-block relative break-all"
      >
        <i
          class="iconfont icon-strange arrow-icon rotate-[120deg] text-white absolute -left-3 top-1"
        ></i>
        <template v-if="props.message.type === 'text'">
          <div>{{ props.message.content }}</div>
        </template>
        <template v-else-if="props.message.type === 'html'">
          <div v-html="props.message.content"></div>
        </template>
        <template v-else-if="props.message.type === 'Recommend'">
          <recommend-message :message="props.message"></recommend-message>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
